<template>
    <div class="material-warning-box">
        
        <div class="material-warning-content">
            <div class="material-warning-tabs">
                <a-tabs v-model:activeKey="largeTabKey" type="card" @change="largeTabChange">
                    <a-tab-pane key="供应商审计" tab="供应商审计"></a-tab-pane>
                    <a-tab-pane key="物料平衡预警" tab="物料平衡预警"></a-tab-pane>
                </a-tabs>
            </div>
            <div style="display: flex;" v-if="largeTabKey == '供应商审计'">
                <div style="height: calc(100vh - 200px);width: 40%;" :key="containerKey">
                    <div class="ringDiagram-comp" :id="containerId"></div>
                </div>
                <div style="width: 60%;" :key="certificateAlertKey">
                    <div class="material-warning-tabs">
                        <a-tabs v-model:activeKey="activeKey" type="card" @change="callback(false)">
                            <a-tab-pane key="0" tab="已过期"></a-tab-pane>
                            <a-tab-pane key="1" tab="三个月以内过期"></a-tab-pane>
                            <a-tab-pane key="2" tab="三个月以上有效"></a-tab-pane>
                            <a-tab-pane key="3" tab="长期有效"></a-tab-pane>
                        </a-tabs>
                    </div>
                    <div style="position: fixed;">
                        <span class="material-warning-num alert-num0">{{ licenseWarningList[0].num }}</span>
                        <span class="material-warning-num alert-num1">{{ licenseWarningList[1].num }}</span>
                        <span class="material-warning-num alert-num2">{{ licenseWarningList[2].num }}</span>
                        <span class="material-warning-num alert-num3">{{ licenseWarningList[3].num }}</span>
                    </div>
                    <div>
                        <commpVxeTable
                            
                            :config="certificateAlertConfig" 
                            :columns="certificateAlertColumns"
                            :formItem="[]" 
                            :occupancyHeight="100"
                            :isCanWrap="true"
                        >
                            <template v-slot:sfgq_name="{row}">
                                <span v-if="row.sfgq == '长期有效'" style="color: #91cc75;">长期有效</span>
                                <span v-if="row.sfgq == '未过期'" style="color: #5470c6;">未过期</span>
                                <span v-if="row.sfgq == '即将过期'" style="color: #fac858;">即将过期</span>
                                <span v-if="row.sfgq == '已过期'" style="color: #ee6666;">已过期</span>
                            </template>
                        </commpVxeTable>
                    </div>
                </div>
            </div>
            <div v-if="largeTabKey == '物料平衡预警'" style="display: flex;">
                <div style="height: calc(100vh - 200px);width: 40%;" :key="balanceKey">
                    <div class="ringDiagram-comp" :id="balanceId"></div>
                </div>
                <div style="width: 60%;" :key="balanceAlertKey">
                    <div class="material-warning-tabs">
                        <a-tabs v-model:activeKey="activeKey" type="card" @change="callback(true)">
                            <a-tab-pane key="0" tab="库存为空"></a-tab-pane>
                            <a-tab-pane key="1" tab="库存不足"></a-tab-pane>
                            <a-tab-pane key="2" tab="库存即将不足"></a-tab-pane>
                        </a-tabs>
                    </div>
                    <div style="position: fixed;">
                        <span class="material-warning-num alert-num-b0">{{ balanceWarningList[0].num }}</span>
                        <span class="material-warning-num alert-num-b1">{{ balanceWarningList[1].num }}</span>
                        <span class="material-warning-num alert-num-b2">{{ balanceWarningList[2].num }}</span>
                    </div>
                    <div>
                        <commpVxeTable
                            
                            :config="balanceAlertConfig" 
                            :columns="balanceAlertColumns"
                            :formItem="[]" 
                            :adaptiveHeight="true"
                            :isCanWrap="true"
                        >
                            <template v-slot:sfgq_name="{row}">
                                <span v-if="row.sfgq == '长期有效'" style="color: #91cc75;">长期有效</span>
                                <span v-if="row.sfgq == '未过期'" style="color: #5470c6;">未过期</span>
                                <span v-if="row.sfgq == '即将过期'" style="color: #fac858;">即将过期</span>
                                <span v-if="row.sfgq == '已过期'" style="color: #ee6666;">已过期</span>
                            </template>
                        </commpVxeTable>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import {
    spcyQyInfoqueryWlsjyjPageList,
    spcyQyInfoqueryWlphyjPageList,
} from './service/index'
import assessCheckApi from './service/api'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
export default {
    components:{
        commpVxeTable,
    },
    props:{
        onlyCurrentUser:{
            type:Boolean,
            default: () => {
                return false
            },
            required:false
        },
        fqyid:{
            type:String,
            default: () => {
                return ''
            },
            required:false
        },
    },
    data(){
        return{
            largeTabKey:'供应商审计',
            activeKey:'0',
            containerId:'c'+ new Date().getTime(),
            balanceId:'a'+ new Date().getTime(),
            containerKey:null,
            balanceKey:null,
            licenseWarningList:[{
                typeNum:'ygqSize',
                typeList:'ygqList',
                num:0,
                list:[],
                title:'已过期',
            },{
                typeNum:'jjgqSize',
                typeList:'jjgqList',
                num:0,
                list:[],
                title:'三个月以上有效',
            },{
                typeNum:'ysyxSize',
                typeList:'ysyxList',
                num:0,
                list:[],
                title:'三个月以内过期',
            },{
                typeNum:'cqyxSize',
                typeList:'cqyxList',
                num:0,
                list:[],
                title:'长期有效',
            }],
            certificateAlertKey:null,
            certificateAlertConfig:{
                api:assessCheckApi.spcyQyInfoqueryWlsjyjPageList,
                rowId: 'id',
                height:400,
                autoHidden:true,
                pageSize:10000,
                listData:'ygqList',
                paramet:{
                    onlyCurrentUser:this.onlyCurrentUser,
                    fqyid:this.fqyid,
                }
            },
            certificateAlertColumns:[{
                title: '企业名称',
                field: 'fqymc',
            },{
                title: '企业联系人',
                field: 'fqylxr',
                width:70
            },{
                title: '经销商名称',
                field: 'fjxsmc',
            },{
                title: '供应商地址',
                field: 'fgysdz',
            },{
                title: '物料分类',
                field: 'fwlfl',
            },{
                title: '物料有效期',
                field: 'fwlyxq',
            },{
                title: '是否过期',
                field: 'sfgq',
                slots: {
                    default: 'sfgq_name',
                },
                width:70
            },{
                title: '等级',
                field: 'fgysdj',
            }],
            //平衡
            balanceWarningList:[{
                typeNum:'emptySize',
                typeList:'emptyList',
                num:0,
                list:[],
                title:'库存为空',
            },{
                typeNum:'xySize',
                typeList:'xyList',
                num:0,
                list:[],
                title:'库存不足',
            },{
                typeNum:'dySize',
                typeList:'dyList',
                num:0,
                list:[],
                title:'库存即将不足',
            }],
            balanceAlertKey:null,
            balanceAlertConfig:{
                api:assessCheckApi.spcyQyInfoqueryWlphyjPageList,
                rowId: 'id',
                height:400,
                autoHidden:true,
                pageSize:10000,
                listData:'emptyList',
                paramet:{
                    onlyCurrentUser:this.onlyCurrentUser,
                    fqyid:this.fqyid,
                }
            },
            balanceAlertColumns:[{
                title: '企业名称',
                field: 'fqymc',
            },{
                title: '企业联系人',
                field: 'fqylxr',
                width:70
            },{
                title: '物料编号',
                field: 'fwlbh',
            },{
                title: '物料名称',
                field: 'fwlmc',
            },{
                title: '物料等级',
                field: 'fwldj',
            },{
                title: '规格',
                field: 'fgg',
            },{
                title: '数量单位',
                field: 'fsldw',
            },{
                title: '预警等级',
                field: 'fgysdj',
            },{
                title: '是否过期',
                field: 'sfgq',
                slots: {
                    default: 'sfgq_name',
                },
                width:70
            }],
        }
    },
    watch:{

    },
    mounted(){
        this.getData()
    },
    methods:{
        getData(){
            spcyQyInfoqueryWlsjyjPageList({onlyCurrentUser:this.onlyCurrentUser,fqyid:this.fqyid}).then(res=>{
                if(res.code == 200){
                    //console.log(res.result)
                    let data = JSON.parse(JSON.stringify(this.licenseWarningList))
                    for(let key  in res.result){
                        // this.licenseWarningList.forEach((item,index) => {
                        //     if(key == item.typeNum){
                        //         data.push({num:res.result[key],list:res.result[item.typeList],typeNum:key,typeList:item.typeList,title:item.title})
                        //     }
                        // });
                        this.licenseWarningList.forEach((item,index)=>{
                            if(item.typeNum == key){
                                data[index].num = res.result[item.typeNum]
                            }
                            if(item.typeList == key){
                                data[index].list = res.result[item.typeList]
                            }
                        })
                    }
                    this.licenseWarningList = data
                    //console.log('9999999999999',data)
                    this.getPieChart(this.licenseWarningList)
                    this.containerId = 'c'+ new Date().getTime()
                }else{
                    this.$message.warning(res.message)
                }
            })
            spcyQyInfoqueryWlphyjPageList({onlyCurrentUser:this.onlyCurrentUser,fqyid:this.fqyid}).then(res=>{
                if(res.code == 200){
                    //console.log(res.result)
                    let datas = []
                    for(let key  in res.result){
                        this.balanceWarningList.forEach((item,index) => {
                            if(key == item.typeNum){
                                datas.push({num:res.result[key],list:res.result[item.typeList],typeNum:key,typeList:item.typeList,title:item.title})
                            }
                        });
                    }
                    this.balanceWarningList = datas
                    //console.log(this.balanceWarningList)
                    this.getBalancePieChart(this.balanceWarningList)
                    this.balanceId = 'a'+ new Date().getTime()
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        largeTabChange(){
            this.balanceAlertKey = Date.now()
            this.certificateAlertKey = Date.now()
            this.getData()
        },
        getPieChart(list){
            let dataList = list.map(item=>{return {name:item.title,value:item.num}})
            var chartDom = document.getElementById(this.containerId);
            var myChart = this.$echarts.init(chartDom);
            var option;
            option = {
                title: {
                    text: '',
                    subtext: '',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    // orient: 'vertical',
                    left: 'center',
                    padding:[30,0,0,0],
                    textStyle: {
                        fontWeight: "bold",
                        fontSize: 16
                    }
                },
                series: [
                    {
                        name: '',
                        type: 'pie',
                        radius: '40%',
                        startAngle: 225,
                        center: ['45%', '50%'],
                        data: dataList,
                        emphasis: {
                            itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        itemStyle: {
                            normal: {
                            color: function (colors) {
                                var colorList = ['#ee6666','#fac858','#5470c6','#91cc75'];
                                return colorList[colors.dataIndex];
                            }
                            },
                        },
                        label: {
                            formatter: '{b|{b}：}{c}  {per|{d}%}  ',
                            backgroundColor: '#F6F8FC',
                            borderWidth: 1,
                            borderRadius: 4,
                            rich: {
                                a: {
                                    color: '#6E7079',
                                    lineHeight: 22,
                                    align: 'center'
                                },
                                hr: {
                                    borderColor: '#8C8D8E',
                                    width: '100%',
                                    borderWidth: 1,
                                    height: 0
                                },
                                b: {
                                    color: '#4C5058',
                                    fontSize: 14,
                                    fontWeight: 'bold',
                                    lineHeight: 33
                                },
                                per: {
                                    color: '#fff',
                                    backgroundColor: '#4C5058',
                                    padding: [3, 4],
                                    borderRadius: 4
                                }
                            }
                        },
                    }
                ]
            };
            option && myChart.setOption(option);
        },
        getBalancePieChart(list){
            let dataList = list.map(item=>{return {name:item.title,value:item.num}})
            var chartDom = document.getElementById(this.balanceId);
            var myChart = this.$echarts.init(chartDom);
            var option;
            option = {
                title: {
                    text: '',
                    subtext: '',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    // orient: 'vertical',
                    left: 'center',
                    padding:[30,0,0,0],
                    textStyle: {
                        fontWeight: "bold",
                        fontSize: 16
                    }
                },
                series: [
                    {
                        name: '',
                        type: 'pie',
                        radius: '40%',
                        startAngle: 225,
                        center: ['45%', '50%'],
                        data: dataList,
                        emphasis: {
                            itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        itemStyle: {
                            normal: {
                            color: function (colors) {
                                var colorList = ['#ee6666','#fac858','#5470c6','#91cc75'];
                                return colorList[colors.dataIndex];
                            }
                            },
                        },
                        label: {
                            formatter: '{b|{b}：}{c}  {per|{d}%}  ',
                            backgroundColor: '#F6F8FC',
                            borderWidth: 1,
                            borderRadius: 4,
                            rich: {
                                a: {
                                    color: '#6E7079',
                                    lineHeight: 22,
                                    align: 'center'
                                },
                                hr: {
                                    borderColor: '#8C8D8E',
                                    width: '100%',
                                    borderWidth: 1,
                                    height: 0
                                },
                                b: {
                                    color: '#4C5058',
                                    fontSize: 14,
                                    fontWeight: 'bold',
                                    lineHeight: 33
                                },
                                per: {
                                    color: '#fff',
                                    backgroundColor: '#4C5058',
                                    padding: [3, 4],
                                    borderRadius: 4
                                }
                            }
                        },
                    }
                ]
            };
            option && myChart.setOption(option);
        },
        callback(val){
            let index = Number(this.activeKey)
            if(val){
                this.balanceAlertConfig.listData = this.balanceWarningList[index].typeList
                this.balanceAlertConfig.paramet = { onlyCurrentUser:this.onlyCurrentUser,fqyid:this.fqyid }
                this.balanceAlertKey = Date.now()
            }else{
                this.certificateAlertConfig.listData = this.licenseWarningList[index].typeList
                this.certificateAlertConfig.paramet = { onlyCurrentUser:this.onlyCurrentUser,fqyid:this.fqyid }
                this.certificateAlertKey = Date.now()
            }
            
        },
    }
}
</script>
<style lang="less">
.material-warning-box{
    background-color: #fff;
    height: calc(100vh - 200px);
    overflow-y: hidden;
    .material-warning-content{
        // display: flex;
        // flex-direction: row;
        
        height: calc(100vh - 114px);
        overflow-y: auto;
    }
    .material-warning-tabs{
        .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab{
            padding-right: 30px;
            margin-right: 10px !important;
        }
        .ant-tabs-tab{
            border-radius: 10px 10px 0 0 !important;
        }
        .ant-tabs-nav-container{
            padding-left: 10px;
            height: 50px !important;
        }
        .ant-tabs-nav-scroll{
            padding-top: 10px;
        }
        .ant-tabs-tab-active{
            background-color: #5ca3e5 !important;
            color: #fff !important;
            border-color: #5ca3e5 !important;
            box-shadow: 0px 0px 12px 0px #5ca3e5;
        }
    }
    .material-warning-num{
        display: inline-block;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background: #ed5565;
        color: #fff;
        text-align: center;
        line-height: 25px;
        position: relative;
        top: -50px;
        overflow: hidden;
        border: 1px solid #fff;
    }
    .alert-num0{
        left: 77px;
        background-color: #ee6666;
    }
    .alert-num1{
        left: 220px;
        background-color: #fac858;
    }
    .alert-num2{
        left: 361px;
        background-color: #5470c6;
    }
    .alert-num3{
        left: 458px;
        background-color: #91cc75;
    }
    .alert-num-b0{
        left: 92px;
        background-color: #ee6666;
    }
    .alert-num-b1{
        left: 185px;
        background-color: #fac858;
    }
    .alert-num-b2{
        left: 313px;
        background-color: #5470c6;
    }
    .ringDiagram-comp{
        width: 100%;
        height: calc(100vh - 200px);
    }

}
</style>